<!-- <!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>leeya网盘</title>
		<style type="text/css">
			.outSide {
				margin-top: 15px;
				border-bottom: 1px solid #ccc;
				margin-bottom: 10px;
			}
		</style>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet" />

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>
	<body>
		<div id="app">
			<div class='container outSide'>
				<div class='row'>
					<div class='col-md-6'>
						<h3>Leeya网盘<small>做我自己的数据库</small></h3>
					</div>
					<div class='col-md-2 col-md-offset-3'>
						<input type='button' class='btn btn-success' value='登录／注册' data-toggle="modal" data-target=".abc" style="margin-top: 15px;"
						 v-if="loginFlag == false">
						<p class='' style='margin-top: 25px;' v-if="loginFlag == true">欢迎回来 {{this.user}}<span></span></p>
					</div>

				</div>
			</div>


			<div class='container' v-show="context == true">
				<table class="table text-center table-hover fileShowNode">
					<thead>
						<tr>
							<td>序号</td>
							<td>文件名</td>
							<td>文件大小</td>
							<td>上传时间</td>
							<td>下载次数</td>
							<td>是否删除</td>
						</tr>
						<!--因为这里jq操作比较多,并且之前已经封装好了方法,所以这里不用循环-->
						<!-- <tr v-for="item in data">
			  <td>{{item.index}}</td>
			  <td>{{item.filesName}}</td>
			  <td>{{item.size}}</td>
			  <td>{{item.timer}}</td>
			  <td>{{item.download}}</td>
			  <td><input type='button' class='btn btn-default btn-danger btn-xs btn-deleteNode' value='删除' data-toggle="modal" data-target=".bbb"></td>`;
		  </tr> -->
					</thead>
					<tbody>
					</tbody>
				</table>

				<form class='form-inline'>
					<div class='form-group'>
						<input type="file" name="" class='fsNode'>
					</div>
					<div class='form-group'>
						<input type="button" name="" class='btn btn-default btn-primary btn-xs btn-setFiles' value="上传文件" data-toggle="modal"
						 data-target=".bbb">
					</div>
				</form>
			</div>
			<div class="modal fade bbb" tabindex="-1" role="dialog">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title">进度栏</h4>
						</div>
						<div class="modal-body bodytextNode">
							<div class="progress">
								<div class="progress-bar progress-bar-info progress-bar-striped" id='prsbarNode' role="progressbar"
								 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
									0%
								</div>
							</div>
							<p>One fine body&hellip;</p>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal-dialog -->
			</div><!-- /.modal -->



			<div class="modal fade abc" tabindex="-1" role="dialog">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title">注册登录框</h4>
						</div>
						<div class="modal-body">
							<form class='myForm'>
								<div class='form-group'>
									<label>用户名：</label>
									<input type="" name="" class='form-control' v-model="user">
								</div>
								<div class='form-group'>
									<label>密码：</label>
									<input type="password" name="" class='form-control' v-model="pass">
								</div>
								<input type="button" name="" value='登录' class='btn btn-default btn-primary' @click="login">
								<input type="button" name="" value='注册' class='btn btn-default btn-info btn-res' @click="registered">
							</form>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal-dialog -->
			</div><!-- /.modal -->
		</div>
		<script src="js/jq.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/vue.js"></script>
		<script>
			var vue = new Vue({
				el: '#app',
				data: {
					context: false,
					loginFlag: false,
					user: '',
					pass: ''
				},
				created() {


				},
				methods: {
					login() {
						//登录
						
						$.ajax({
							url: 'http://localhost:9111/login/login',
							type: 'get',
							data: {
								'user': this.user,
								'pass': this.pass
							},
							success: (data) => {
								//console.log(data)
								if (data.ok == 1) {
									//alert(data.msg);
									$('.abc').modal('toggle');

									this.loginFlag = true;
									this.context = true;

									this.data = data.data;
									for (var i = 0; i < data.data.length; i++) {
										$('.fileShowNode tbody')[0].appendChild(toTr(index, data.data[i].LastName, (data.data[i].size / 1024).toFixed(
											2) + 'KB', data.data[i].lastTime, data.data[i].download, data.data[i].hashName));
										index++;
									}
								} else {
									alert(data.msg);
									$('.myForm .form-group').addClass('has-error');
								}
							}
						})

					},
					registered() {
						//注册
						$.ajax({
							url: 'http://localhost:9111/login/res',
							type: 'get',
							data: {
								'user': this.user,
								'pass': this.pass
							},
							success: function(data) {
								if (data.ok == 1) {
									alert(data.msg);
									// $('.abc').modal('toggle');
								} else {
									alert(data.msg);
									$('.myForm .form-group').addClass('has-error');
								}
							}
						})

					}
				}
			});
		</script>
		<script type="text/javascript">
			(()=>{
			      let index = 1;
			      $('.btn-myBtn').on({
			        click(){
			          $('.myForm .form-group').removeClass('has-error');
			          $('.userNode').val('');
			          $('.passNode').val('');
			
			        }
			      });

			function toTr(index, filesName, size, timer, download, hash) {
				var oTr = document.createElement('tr');
				$(oTr).attr('hash', hash);
				oTr.innerHTML =
					`
            <td>${index}</td>
            <td>${filesName}</td>
            <td>${size}</td>
            <td>${timer}</td>
            <td>${download}</td>
            <td><input type='button' class='btn btn-default btn-danger btn-xs btn-deleteNode' value='删除' data-toggle="modal" data-target=".bbb"></td>`;

				return oTr;
			}


			//删除文件
			$('body').on({
				'click': function() {
					var _this = this;
					$.ajax({
						url: 'http://localhost:9111/login/removeFile',
						type: 'get',
						data: {
							user: $('.userNode').val(),
							hash: $(_this.parentNode.parentNode).attr('hash')
						},
						success: function(data) {
							//console.log(data)
							if (data.ok == 1) {
								// $('.abc').modal('toggle');
								$('.bodytextNode p').html(data.msg);
								_this.parentNode.parentNode.remove();

							} else {
								$('.bodytextNode p').html(data.msg);
							}
						}
					})
				}
			}, '.btn-deleteNode')


			//上传文件
			$('.btn-setFiles').on({
				'click': function() {
					prsbarNode.style.width = '0%';
					prsbarNode.innerHTML = '0';
					var FromNode = new FormData();
					console.log($('.fsNode')[0].files[0])
					FromNode.append('files', $('.fsNode')[0].files[0]);
					FromNode.append('Fsnames', $('.userNode').val());

					var xhr = new XMLHttpRequest();
					xhr.open('post', 'http://localhost:9111/login/getfiles', true);

					xhr.upload.onprogress = function(e) {
						//console.log();
						console.log(parseInt(e.loaded / e.total * 100))
						prsbarNode.style.width = parseInt(e.loaded / e.total * 100) + '%';
						prsbarNode.innerHTML = parseInt(e.loaded / e.total * 100);

					};
					xhr.send(FromNode);
					$('.bodytextNode p').html('正在上传中...');

					xhr.onload = function() {
						var json = eval('(' + xhr.responseText + ')');
						//index,filesName,size,timer,download,hash
						if (json.ok == 1) {
							$('.bodytextNode p').html('恭喜您～上传成功');
							$('.fileShowNode tbody')[0].appendChild(toTr(index, $('.fsNode')[0].files[0].name, ($('.fsNode')[0].files[0]
								.size / 1024).toFixed(2) + 'KB', json.timer, 0, json.hash));
							index++;

						} else {
							$('.bodytextNode p').html(json.msg);
						}
						$('.fsNode').val('');
					};
				}
			})
			});
		</script>
	</body>
</html>
 -->